<template>
	<div class="box_container" id="full" v-bind:class="[isActive ? active:'',error]">
		<div class="check_title">
			<el-row>
				<el-col :span="15" class="name">
					<span v-text="detailData.sexFlag === '阳'? '[阳性]':'[阴性]'"></span>
					<span v-text="detailData.name"></span>
					<span v-text="detailData.ct"></span>
					<span v-text="detailData.ct2"></span>
					<span v-text="detailData.time"></span>
					<span v-text="detailData.result" class="hasfinish">审核完成</span>
				</el-col>
				<el-col :span="8" class="tr">
					<el-tabs v-model="activeName" @tab-click="handleChangeTabs">
						<el-tab-pane name="apply">
							<span slot="label">
								<i class="iconfont">&#xe66e;</i>申请单
							</span>
						</el-tab-pane>
						<el-tab-pane name="report">
							<span slot="label">
								<i class="iconfont">&#xe66f;</i>报告
							</span>
						</el-tab-pane>
						<el-tab-pane name="move" @click="showApply_rep = false;showMove_film = true">
							<span slot="label">
								<i class="iconfont">&#xe671;</i>影像
							</span>
						</el-tab-pane>
						<el-tab-pane name="film">
							<span slot="label">
								<i class="iconfont">&#xe672;</i>胶片
							</span>
						</el-tab-pane>

					</el-tabs>
					<!--
					<span @click="goBack">
						<i class="iconfont">&#xe674;</i>
					</span>
					-->
				</el-col>
				<el-col :span="1"> <span @click="handleFullScreen" v-if="isFull === true">
						<i class="iconfont">&#xe629;</i>
					</span>
					<span @click="handleCancelFullScreen" v-if="isFull === false">
						<i class="iconfont">&#xe86e;</i>
					</span></el-col>
			</el-row>
		</div>
		<!-- 影像胶片报告单-->
		<div class="main-content">
			<div v-if="showApply_rep">
				<!-- 基本信息-->
				<div class="basic">
					<h3>基本信息</h3>
					<div class="line"></div>
					<div class="box">
						<el-row>
							<el-col :span="4"><i>姓名:</i><span>{{applicationData.name}}</span></el-col>
							<el-col :span="4"><i>性别:</i><span>{{applicationData.patient_sex}}</span>
							</el-col>
							<el-col :span="4"><i>年龄:</i><span>{{applicationData.patient_age}}</span>岁</el-col>
						</el-row>
						<el-row>
							<el-col :span="4"><i>就诊类型:</i>
								<span v-if="applicationData.patient_class === 0">门诊</span>
								<span v-if="applicationData.patient_class === 1">住院</span>
								<span v-if="applicationData.patient_class === 2">急诊</span>
								<span v-if="applicationData.patient_class === 3">体检</span>
								<span v-if="applicationData.patient_class === 4">普通</span>
							</el-col>
							<el-col :span="4"><i>住院号:</i><span>{{applicationData.in_patient_no}}</span></el-col>
							<el-col :span="4"><i>病历号:</i><span>{{applicationData.med_rec_no}}</span></el-col>
							<el-col :span="4"><i>床号:</i><span>{{applicationData.bed_no}}</span></el-col>
						</el-row>
						<el-row>
							<el-col :span="4"><i>申请科室:</i><span>{{applicationData.req_office_name}}</span></el-col>
							<el-col :span="4"><i>病区:</i><span>{{applicationData.in_patient_ward}}</span></el-col>
							<el-col :span="4"><i>检查项目:</i><span>{{applicationData.exam_item}}</span></el-col>
							<el-col :span="4"><i>检查部位:</i><span>{{applicationData.exam_body_part}}</span></el-col>
						</el-row>
					</div>
				</div>
				<!-- 申请信息-->
				<div class="apply">
					<h3>申请信息</h3>
					<div class="line"></div>
					<div class="box">
						<el-row>
							<el-col :span="4"><i>临床诊断:</i></el-col>
							<el-col :span="20">{{applicationData.relevant_clinical_info}}</el-col>
						</el-row>
						<!--申请单-->
						<div v-if="showApply === true">
							<el-row>
								<el-col :span="4"><i>病史摘要:</i></el-col>
								<el-col :span="20">{{applicationData.relevant_clinical_info}}</el-col>
							</el-row>
							<el-row>
								<el-col :span="4"><i>检查报告:</i></el-col>
								<el-col :span="20">{{applicationData.relevant_clinical_info}}</el-col>
							</el-row>
						</div>
						<!--报告-->
						<div v-if="showApply === false">
							<el-row>
								<el-col :span="4"><i>影像所见:</i></el-col>
								<el-col :span="20">{{applicationData.relevant_clinical_info}}</el-col>
							</el-row>
							<el-row>
								<el-col :span="4"><i>影像诊断:</i></el-col>
								<el-col :span="20">{{applicationData.relevant_clinical_info}}</el-col>
							</el-row>
						</div>
					</div>

					<div class="line"></div>
					<div class="box">
						<el-row v-if="showApply === true">
							<el-col :span="8"><i>申请医生:</i><span>{{applicationData.req_doctor_doctor}}</span></el-col>
							<el-col :span="8"><i>申请科室:</i><span>{{applicationData.req_office_name}}</span></el-col>
							<el-col :span="8"><i>申请时间:</i><span>{{applicationData.req_time}}</span></el-col>
						</el-row>
						<el-row v-if="showApply === false">
							<el-col :span="8"><i>报告医生:</i><span>{{applicationData.req_doctor_doctor}}</span></el-col>
							<el-col :span="8"><i>审核医生:</i><span>{{applicationData.req_doctor_doctor}}</span></el-col>
							<el-col :span="8"><i>报告时间:</i><span>{{applicationData.req_time}}</span></el-col>
						</el-row>
					</div>
				</div>
			</div>
			<div v-if="showMove_film === true">影像或者是胶片</div>
		</div>

	</div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      detailData: {
        sexFlag: '阴',
        name: '黄书焕',
        ct: 'CT',
        ct2: '常规CT',
        time: '2020-12-28',
        result: '审核通过',
      },
      titleData: [
        {
          title: '212-399-8180',
          time: '2018-12-25',
        },
        {
          title: 'CT胸部平扫',
          time: '2018-12-25',
        },
        {
          title: 'CT胸部平扫',
          time: '2018-12-25',
        },
        {
          title: 'CT胸部平扫',
          time: '2028-12-25',
        },
        {
          title: 'CT胸部平扫',
          time: '2028-12-25',
        },
        {
          title: 'CT胸部平扫',
          time: '2028-12-25',
        },
      ],
      showApply_rep: true,
      showReport: false,
      showApply: true, // 报告申请单
      showMove_film: false,
      applicationData: {
        name: '王麻子',
        patient_sex: '男',
        patient_age: 125,
        patient_class: 0,
        med_rec_no: 0, // 病历号
        exam_item: '项目', // 检查项目
        exam_body_part: '部位', // 部位
        in_patient_ward: '病区', // 病区
        med_rec_no: '病历号', // 病历号
        in_patient_no: 'M8588', // 住院号
        bed_no: '#155', // 床号
        req_doctor_doctor: '王麻子医生',
        req_office_name: '科室',
        req_time: '2019-12-28',
        relevant_clinical_info:
					'Temporibus veritatis deserunt nulla impedit doloribus qui vel. Rerum assumenda sunt voluptatum totam iusto eum consequatur. Velit debitis sed saepe quos voluptatem voluptas omnis inventore et.',
      }, // 申请单数据
      isFull: true,
      isActive: false,
      active: 'full-active',
      error: null,
      activeName: 'apply',
    }
  },
  computed: {},
  created() {},
  mounted() {
    console.log(process.env)
  },
  methods: {
    handleCheck(item) {
      // 切换检查项目
    },
    goBack() {
      history.back(-1)
    },
    handleFullScreen() {
      // 全屏展示
      this.isActive = true
      this.isFull = false
      console.log('全屏')
      // // TOdo
      // this.activeName = 'apply'
      // this.handleChangeTabs()
    },
    handleCancelFullScreen() {
      // 取消全屏展示
      this.isActive = false
      this.isFull = true

      /*
       * TOdo
       * this.activeName = 'apply'
       * this.handleChangeTabs()
       */
      console.log('全1屏')
    },
    handleChangeTabs(tab, event) {

      /*
       * tab 切换 activeName
       * console.log(tab, event)
       */
      if (this.activeName === 'apply') {
        // 申请单
        this.showApply_rep = true
        this.showApply = true
        this.showMove_film = false
      }
      if (this.activeName === 'report') {
        // 报告
        this.showApply_rep = true
        this.showApply = false
        this.showMove_film = false
      }
      if (this.activeName === 'move') {
        // 影像
        this.showApply_rep = false
        this.showMove_film = true
      }
      if (this.activeName === 'film') {
        this.showApply_rep = false
        this.showMove_film = true
        // 胶片
      }
    },
  },
}
</script>

<style scoped lang="less">
.box_container {
	// padding-left: 20px;
	.title {
		height: 100px;
		// padding: 15px 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex: 1;
		.item {
			width: 200px;
			// height: 70px;
			background-image: url('~@/assets/imgs/common.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			text-align: left;
			box-sizing: content-box;
			> div {
				padding: 30px 0 30px 43px;
			}
			h3 {
				font-size: 18px;
				font-weight: 500;
			}
			h4 {
				font-size: 14px;
				font-weight: 400;
			}
		}
	}
	.check_title {
		height: 50px;
		line-height: 50px;
		// background-color: #f5f5f5;
		color: #333333;
		margin-bottom: 20px;
		.el-row {
			> :nth-child(1) {
				color: #333;
				font-weight: 600;
				span {
					margin-left: 20px;
					font-weight: 400;
				}
			}
			> :nth-child(2) {
				color: #0a70b0;
				text-align: right;
				span {
					margin-right: 3.2%;
					cursor: pointer;
				}
			}
		}
	}

	.hasfinish {
		color: @49B523;
	}
	.main-content {
		h3 {
			font-weight: 600;
		}
		// width: 46%;
		min-height: 500px;
		margin-top: 20px;
		padding: 40px;
		margin: 0 auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
		.line {
			width: 100%;
			height: 4px;
			border-bottom: 1px solid #dddddd;
			border-top: 1px solid #dddddd;
			margin: 8px 0;
		}
		i {
			color: #999;
			width: 80px;
			display: inline-block;
			text-align: justify;
			text-justify: distribute-all-lines; /*ie6-8*/
			text-align-last: justify; /* ie9*/
			-moz-text-align-last: justify; /*ff*/
			-webkit-text-align-last: justify; /*chrome 20+*/
			margin-right: 10px;
		}
		.basic {
			padding-top: 54px 0;
			// height: 262px;
			.el-col-4 {
				width: 24.66667%;
				margin-top: 20px;
			}

			.box {
				padding-bottom: 40px;
			}
		}
		.apply .box {
			padding-bottom: 20px;
			.el-row {
				margin-top: 20px;
			}
		}
	}

	.el-tabs__item {
		color: #0a70b0 !important;
	}
}
.full-active {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 10000000;
}
</style>
